<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>时间测试</title>
</head>
<body>
	<p>
		1.倒计时测试和计时器测试都是精确测试，它受程序阻塞影响，就是实现时间是多少就是多少，阻塞之后会快速跟上实际的时间情况。<br>
		2.不精确计时和方块的运动为不精确测试，它受程序阻塞影响后只是会停止，阻塞之后返回原来的计时或运行。<br>
		3.单机游戏可以使用不精确计时，如果是联网的PVP游戏就必须使用精确计时，因为如果有一方游戏崩溃了重新再进入就可以快速跟上实际的时间情况。
	</p>
</body>
<script type="text/javascript" src="../libs/minicomps.min.js"></script>
<script type="text/javascript" src="../libs/TimeFactory.js"></script>
<script type="text/javascript" src="../libs/TweenMax.min.js"></script>
<script type="text/javascript" src="../libs/moonJs.js"></script>
<script type="text/javascript">
	let label=new mc.Label(document.body,320,180,'时间显示框');
	let label2=new mc.Label(document.body,320,220,'');
	
	var y=120;
	new mc.Button(document.body,200,y+=50,'倒计时测试',(e)=>{
		downTime();
	});
	new mc.Button(document.body,200,y+=50,'计时器测试',(e)=>{
		upTime();
	});
	new mc.Button(document.body,200,y+=50,'开启阻塞测试',(e)=>{
		programBlock();
	});
	new mc.Button(document.body,200,y+=50,'删除所有时间',(e)=>{
		removeTime();
	});
	new mc.Button(document.body,200,y+=50,'计时且阻塞',(e)=>{
		upTime();
		programBlock();
	});
	new mc.Button(document.body,200,y+=50,'不精确计时',(e)=>{
		upTime2();
	});
	new mc.Button(document.body,200,y+=50,'点了计时再点结束',(e)=>{
		useTime();
	});
	new mc.Button(document.body,200,y+=50,'点击运动再点停止',(e)=>{
		moveFunction();
	});
	new mc.Checkbox(document.body,310,y+5,'运动精确',false,(e)=>{
		if(this.gameTimer){
			this.gameTimer.isPrecise=e.detail;
			console.log(this.gameTimer.timer.isPrecise)
		}
	})

	new mc.Button(document.body,200,y+=50,'每隔6秒点一次',(e)=>{
		if(!TimeFactory.hasCdTime('e',6,'再过num秒后才可以点击')){
			label2.text='点击成功-随机数'+Math.random();
		}
	});

	var moonjs=new MoonJs();
	moonjs.init(moonjs.createCanvas({}));
	let rect=moonjs.createDisplay('rect');
	moonjs.start();//开始渲染
	//删除时间
	function removeTime(){
		TimeFactory.removeTime('a');
		TimeFactory.removeTime('b');
		//TimeFactory.removeTime('c');
		TimeFactory.removeTime('d');
		TimeFactory.removeTime('e');
		label.text='';
		label2.text='';
	}
	//程序阻塞
	function programBlock(){
		var startTime=new Date().getTime();
		for(var i=0;i<8000000000;i++){}
		let t=((new Date().getTime())-startTime);
		label2.text='阻塞'+t+'毫秒，约为'+Math.round(t/1000)+'秒'
	}
	function useTime(){
		if(!TimeFactory.getContentTime('f')){
			TimeFactory.useTime('f',0);
		}else{
			TimeFactory.useTime('f',1);
		}
	}
	//计时器2
	function upTime2(){
		removeTime();
		var timer=TimeFactory.createUpTime('d',0,(data)=>{label.text=data.show});
		timer.isPrecise=false;
	}
	//计时器1
	function upTime(){
		removeTime();
		TimeFactory.createUpTime('b',0,(data)=>{label.text=data.show});
	}
	//倒计时
	function downTime(){
		removeTime();
		TimeFactory.createDownTime('a',300,(data)=>{label.text=data.show});
	}
	//运动函数
	function moveFunction(){
		if(!TimeFactory.getContentTime('c')){
			this.gameTimer=TimeFactory.createGameTime('c',()=>{
				rect.x+=1;
				if(rect.x>1000)rect.x=0;
			},30);
		}else{
			TimeFactory.removeTime('c');
		}
	}
	//-------------
	function createClock(){
		var [cx,cy]=[moonjs.center.x+200,moonjs.center.y];
		var rad=moonjs.stage.width*0.25;
		let color="#000";
		for(let i=0;i<12;i++){
			let c=moonjs.createDisplay('circle').setColor(color).setRadius(5);
			c.y=cy+Math.sin(i/6*(Math.PI))*rad;
			c.x=cx+Math.cos(i/6*(Math.PI))*rad;
		}
		for(let i=0;i<60;i++){
			let c=moonjs.createDisplay('circle').setColor(color).setRadius(1);
			c.y=cy+Math.sin(i/30*(Math.PI))*rad;
			c.x=cx+Math.cos(i/30*(Math.PI))*rad;
		}
		var [hou,min,sec]=[];
		var ratios=[0.5,0.8,1]
		for(let i=0;i<3;i++){
			let pointer=moonjs.createDisplay('rect').setColor(color).setXY(cx,cy).setAnchorXY(0.5,1);
			let w=6*ratios[2-i];
			pointer.setWH(w,rad*ratios[i]);
			if(i==0){
				hou=pointer;
			}else if(i==1){
				min=pointer;
			}else if(i==2){
				sec=pointer;
				sec.setColor('#f00');
			}
		}
		
		let tobNames=['无效果','平滑过度','模拟落地弹起','像弹簧来回弹','超出再回来','先快到后慢','Circ','SlowMo','Sine','SteppedEase'];
		let easeTypes=['','',Bounce.easeOut,Elastic.easeOut,Back.easeOut,Expo.easeOut,Circ.easeOut,SlowMo.ease.config(0.7,0.7, false),Sine.easeOut,SteppedEase.config(3)];
		let [x,y]=[950,200];
		let index=0;
		for(i=0;i<tobNames.length;i++){
			new mc.RadioButton(document.body,x,y+i*30,1,tobNames[i],i==0,selectType);
		}
		function selectType(e){
			index=tobNames.indexOf(e.detail);
		}

		moonjs.createDisplay('circle').setColor(color).setXY(cx,cy).setRadius(10);
		TimeFactory.createGameTime('updatePointer',updatePointer,1);
		function updatePointer(){
			let date=new Date();
			let s=date.getSeconds()/60*360;
			let m=date.getMinutes()/60*360+s/360*6;
			let h=date.getHours()/12*360+m/360*30;
			s=s||360;
			min.angle=m;
			hou.angle=h;
			if(index==0){
				sec.angle=s;
			}else{
				let type=easeTypes[index];
				if(type==''){
					TweenMax.to(sec,1,{angle:s,onComplete:onComplete,onCompleteParams:[sec]}); 
				}else{
					TweenMax.to(sec,1,{angle:s,ease:type,onComplete:onComplete,onCompleteParams:[sec]}); 
				}
			}
		}
		function onComplete(target){
			if(sec.angle>=355){
				sec.angle=0;
			}
		}
		updatePointer();
	}
	createClock();
</script>
</html>